<template>
  <el-dialog width="50%"
             :close-on-click-modal="false"
             :model-value="['detail'].includes(baTable.form.operate!)"
             @close="baTable.toggleForm"
             :destroy-on-close="true"
             title="日志">
    <el-scrollbar v-loading="baTable.form.loading"
                  class="ba-table-form-scrollbar">
      <el-table border
                :data="tableData"
                stripe
                :header-cell-style="{color: '#000'}"
                max-height="450">
        <el-table-column prop="order_id"
                         label="订单ID"></el-table-column>
        <el-table-column prop="status_value"
                         label="状态"></el-table-column>
        <el-table-column prop="msg"
                         label="失败原因"></el-table-column>
        <el-table-column prop="shipping_documents"
                         label="面单链接"></el-table-column>
        <el-table-column prop="created_time"
                         label="创建时间"></el-table-column>
      </el-table>
    </el-scrollbar>
    <template #footer>
      <div>
        <el-button v-blur
                   @click="baTable.toggleForm('')"
                   type="primary">
          {{ t('Close') }}
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import type baTableClass from '/@/utils/baTable'
import { useI18n } from 'vue-i18n'
import { ref, inject, watch } from 'vue'
import { getDetail } from '/@/api/backend/order/orderDocument'
const { t } = useI18n()
const baTable = inject('baTable') as baTableClass
const tableData = ref([] as any[])
const props = defineProps({
    rowData: {
        required: true,
        type: Object,
        default: () => { return {} }
    }
})
watch(
    () => baTable.form.operate,
    (newVal) => {
        if(newVal == 'detail') {
            baTable.form.loading = true
            getDetail({ order_id: props.rowData?.order_id }).then(res => {
                if(res.data && res.data.length) {
                    tableData.value = res.data
                }
                baTable.form.loading = false
            })
        }
    }
)


</script>

<style scoped lang="scss">
</style>